<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        .container{
            margin: 0 auto;
            
            width: 800px;
            /*height: 200px;*/
            /*有的时候，我们的盒子是不设高度，高度是随着内容撑开*/
            border: 1px solid red;
        }
        .box{
            width: 200px;
            height: 200px;
            float: left;
        }
        .box1{
            background-color: gold;
        }
        .box2{
            background-color: blue;
        }
        .box3{
            background-color: goldenrod;
        }
        .box4{
            background-color: fuchsia;
        }

        .footer{
            border: 1px solid rebeccapurple;
            height: 200px;
            background-color: green;
            /* 告诉浏览器，我要清除浮动对我带来的影响，就是说，我们的头上不能出现浮动元素。默认不处理，会出现压盖，钻到浮动元素的下面。*/
            /* 清除浮动的方式一*/
            /* clear 属性值 left right both*/
            clear: both;
        }



        
        
    </style>
</head>
<body>

    <h1>浮动布局-带来的问题</h1>

    <p>如果一个大的盒子没有高度，然后里面的小盒子进行浮动，则当前的盒子的高度会塌陷，浮动的元素是无法撑起父元素的高度。</p>
    <!-- 出现这种问题后，则后面标准流里面的元素，就会向上移动，压盖的效果。-->
    <!-- 使用清除浮动的方式去完成 -->
    <!-- 换个问题：浮动带来了问题。对谁产生影响-->
    <!--800宽 高200 里面存放四个盒子(并排)，每个盒子的宽高200 x 200-->
    <div class="container">
        <div class="box1 box"></div>
        <div class="box2 box"></div>
        <div class="box3 box"></div>
        <div class="box4 box"></div>
    </div>

    <div class="footer">

    </div>



</body>
</html>